<template>
  <div>
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
    <el-tabs v-loading="loading" v-if="isShow" v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in departmentList" :key="index" :label="item.name" :name="item.id+''">
        <transition name="fade-transform" mode="out-in">
          <el-row v-if="activeName===item.id.toString()" class="box-1">
            <el-row class="header">
              <div class="text-center">运营概况</div>
            </el-row>
            <el-row class="row">
              <el-col :span="4">
                <div>今日客户量</div>
                <div>{{ info['today_customer'] || 0 }}</div>
              </el-col>
              <el-col :span="4">
                <div>本月客户量</div>
                <div>{{ info['month_customer'] || 0 }}</div>
              </el-col>
              <!--<el-col :span="4">
                <div>今日业绩</div>
                <div>{{ info['today_bonus_number'] || 0 }}</div>
              </el-col>-->
              <el-col :span="4">
                <div>本月业绩</div>
                <div>{{ info['month_bonus_number'] || 0 }}</div>
              </el-col>
              <el-col :span="4">
                <div>本月成单量</div>
                <div>{{ info['month_member'] || 0 }}</div>
              </el-col>
              <el-col :span="4">
                <div>本月成单率</div>
                <div>{{ info['month_conversion'] || 0 }}%</div>
              </el-col>
              <el-col :span="4">
                <div>本月丢单率</div>
                <div>{{ info['month_no_conversion'] || 0 }}%</div>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col :span="4">
                <div>昨日客户量</div>
                <div>{{ info['yesterday_customer'] || 0 }}</div>
              </el-col>
              <el-col :span="4">
                <div>上月客户量</div>
                <div>{{ info['last_month_customer'] || 0 }}</div>
              </el-col>
              <!--<el-col :span="4">
                <div>昨日业绩</div>
                <div>{{ info['yesterday_bonus_number'] || 0 }}</div>
              </el-col>-->
              <el-col :span="4">
                <div>上月业绩</div>
                <div>{{ info['last_month_bonus_number'] || 0 }}</div>
              </el-col>
              <el-col :span="4">
                <div>上月成单量</div>
                <div>{{ info['last_month_member'] || 0 }}</div>
              </el-col>
              <el-col :span="4">
                <div>总成单率</div>
                <div>{{ info['conversion'] || 0 }}%</div>
              </el-col>
              <el-col :span="4">
                <div>总丢单率</div>
                <div>{{ info['no_conversion'] || 0 }}%</div>
              </el-col>
            </el-row>

            <el-table :data="info['source']" max-height="250">
              <el-table-column label="不同来源客户概况" header-align="center" align="center">
                <el-table-column label="来源" prop="source_name" header-align="center" align="center" />
                <el-table-column label="本日数量" prop="today_customer" header-align="center" align="center" />
                <el-table-column label="昨日数量" prop="yesterday_customer" header-align="center" align="center" />
                <el-table-column label="本月数量" prop="month_customer" header-align="center" align="center" />
                <el-table-column label="上月数量" prop="last_month_customer" header-align="center" align="center" />
                <el-table-column label="本月成单率" prop="month_conversion" header-align="center" align="center">
                  <template slot-scope="scope">
                    {{ scope.row['month_conversion'] || 0 }}%
                  </template>
                </el-table-column>
                <el-table-column label="本月丢单率" prop="month_no_conversion" header-align="center" align="center">
                  <template slot-scope="scope">
                    {{ scope.row['month_no_conversion'] || 0 }}%
                  </template>
                </el-table-column>
                <el-table-column label="总成单率" prop="conversion" header-align="center" align="center">
                  <template slot-scope="scope">
                    {{ scope.row['conversion'] || 0 }}%
                  </template>
                </el-table-column>
                <el-table-column label="总丢单率" prop="no_conversion" header-align="center" align="center">
                  <template slot-scope="scope">
                    {{ scope.row['no_conversion'] || 0 }}%
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-row>
        </transition>

        <div class="lineChartBox">
          <el-row :gutter="32">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-card>
                <div slot="header" class="text-center">
                  <span>客户量 - 曲线图</span>
                </div>
                <line-chart :chart-data="info['customer_list']" />
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-card>
                <div slot="header" class="text-center">
                  <span>业绩 - 曲线图</span>
                </div>
                <line-chart :chart-data="info['customer_number']" />
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-card>
                <div slot="header" class="text-center">
                  <span>成单率/丢单率 - 曲线图（%）</span>
                </div>
                <line-chart :chart-data="info['order_from']" />
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-row class="box-2">
          <el-col :span="24">
            <el-card shadow="hover">
              <div class="header">
                <div class="title">成员列表</div>
              </div>
              <el-table :data="tableData" border row-class-name="cursor-p" @cell-click="memberClick">
                <el-table-column prop="name" label="姓名" min-width="120" header-align="center" align="center" sortable />
                <el-table-column prop="today_customer" label="今日客户" min-width="110" header-align="center" align="center" sortable />
                <el-table-column prop="yesterday_customer" label="昨日客户" min-width="110" header-align="center" align="center" sortable />
                <el-table-column prop="month_customer" label="本月客户" min-width="110" header-align="center" align="center" sortable />
                <el-table-column prop="last_customer_number" label="上月客户" min-width="110" header-align="center" align="center" sortable />
                <el-table-column prop="month_conversion" label="本月成单率" min-width="120" header-align="center" align="center" sortable>
                  <template slot-scope="scope">
                    <el-tag type="success" >{{ scope.row.month_conversion }}%</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="month_no_conversion" label="本月丢单率" min-width="120" header-align="center" align="center" sortable>
                  <template slot-scope="scope">
                    <el-tag type="success" >{{ scope.row.month_no_conversion }}%</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="conversion" label="总成单率" min-width="110" header-align="center" align="center" sortable>
                  <template slot-scope="scope">
                    <el-tag type="success" >{{ scope.row.conversion }}%</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="no_conversion" label="总丢单率" min-width="110" header-align="center" align="center" sortable>
                  <template slot-scope="scope">
                    <el-tag type="success" >{{ scope.row.no_conversion }}%</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="yesterday_bonus_number" label="昨日业绩" min-width="110" header-align="center" align="center" sortable />
                <el-table-column prop="today_bonus_number" label="今日业绩" min-width="110" header-align="center" align="center" sortable />
                <el-table-column prop="last_bonus_number" label="上月业绩" min-width="110" header-align="center" align="center" sortable>
                  <template slot-scope="scope">
                    <el-tag type="primary" >{{ scope.row.last_bonus_number }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="month_bonus_number" label="本月业绩" min-width="110" header-align="center" align="center" sortable>
                  <template slot-scope="scope">
                    <el-tag type="primary" >{{ scope.row.month_bonus_number }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" class="pagination" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange" />
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import LineChart from '../../components/LineChart';
import { handleSortChange, handleSizeChange, handleCurrentChange, columnCheck, parseTime } from '@/utils/table'

export default {
  components: { LineChart },
  data() {
    return {
      isShow: false,
      loading: false,
      activeName: '',
      departmentList: [],
      lineChartData: [],

      info: {
        customer_list: [],
        customer_number: [],
        order_from: []
      },

      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      total: 30,
      tableData: []
    }
  },
  watch: {
    $route(to) {
      if (to.name === '部门运营数据') {
        this.isShow = true;
        this.getDepartmentList();
      }
    }
  },
  created() {
    if (this.$route.name === '部门运营数据') {
      this.isShow = true;
      this.getDepartmentList();
    }
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, columnCheck, parseTime,
    handleClick(){
      this.getDepartmentData();
      this.getDepartmentMemberData();
    },
    /**
     *  获取部门列表
     *  接口:'company/all-list'
     */
    getDepartmentList() {
      const url = 'company/all-list';
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.departmentList = res.data;
        this.activeName = res.data[0] && res.data[0]['id'] + '';
        this.getDepartmentData();
        this.getDepartmentMemberData();
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 获取平台运营数据
    getDepartmentData() {
      this.loading = true;
      const url = 'platform/company';
      const data = { id: this.activeName };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.loading = false;
        Object.assign(this.info, res.data);
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 获取部门人员情况
    getDepartmentMemberData() {
      const url = 'platform/companyUserList';
      // console.log(this.activeName)
      const data = { id: this.activeName };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    memberClick(row) {
      this.isShow = false;
      this.$router.push({
        path: '/workbench/operation/department/personalty',
        query: {
          id: row.id,
          name: row.name
        }
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../../styles/index.scss';
.box-1 {
  .header {
    background: #f5f7fa;
    border: 1px solid #ebeef5;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #909399;
    .info-btn {
      position: absolute;
      top: 9px;
      right: 9px;
    }
  }
  .row {
    border: 1px solid #ebeef5;
    border-top: 0;
    .el-col {
      padding: 8px 0;
      border-right: 1px solid #ebeef5;
      &:last-child {
        border-right: 0px;
      }
      > div {
        text-align: center;
        margin: 8px 0;
        font-size: 11px;
        color: #434343;
        &:last-child {
          font-size: 20px;
          margin-top: 10px;
          margin-bottom: 0;
        }
      }
    }
  }
}
.lineChartBox {
  padding-top: 20px;
}
.box-2 {
  padding-top: 40px;
  .header {
    @include flex-row(center, space-between);
    .title {
      font-size: 18px;
      font-weight: 600;
      padding: 0 15px;
    }
  }
}
</style>
